<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>文件被调用情况</title>
    <link rel="icon" type="image/x-icon" href="img/linuxicon.png"/>
    <link rel="stylesheet" href="drawCalled.css" type="text/css" />
    <script src="jquery-3.3.1.js"></script>
    <script src="d3.v3.min.js" charset="utf-8"></script>
    <script src="initDrawBar.js" charset="utf-8"></script>
</head>

<body>

<script>

    let initCalled = $.getJSON("json/initCall/called.json", function(jn) {
        let dataset = [], rawData = [];
        $.each(jn, function(idx, obj){
            let tpcnt = 0;
            $.each(obj, function (idx1, obj1) {
                $.each(obj1, function(idx2, obj2){
                    tpcnt += obj2["callCnt"];
                });

            });
            if(tpcnt > 0)
            {
                rawData.push(tpcnt);
                dataset.push(Math.log10(tpcnt));
                if((rawData.length-1) % 4 == 0)
                {
                    $("table#drawMessList").append($("<tr></tr>"));
                }
                $("table#drawMessList tr:last").append($("<td></td>").html(rawData.length-1))
                    .append($("<td></td>").html(idx.slice(0,idx.length-2)+"."+idx[idx.length-1]).attr({"barcnt":rawData.length-1}).hover(
                        function()
                        {
                            $(this).addClass("hovered");
                            $("body svg rect").eq($(this).attr("barcnt")).addClass("hovered");
                        },
                        function()
                        {
                            $(this).removeClass("hovered");
                            $("body svg rect").eq($(this).attr("barcnt")).removeClass("hovered");
                        }
                    ));
            }
        });
        initDraw(dataset, rawData, 800, 400);
        $("body svg rect").each(
            function(idx)
            {
                $(this).hover(
                    function()
                    {
                        $(this).addClass("hovered");
                        $("table#drawMessList td[barcnt="+idx+"]").addClass("hovered");
                    },
                    function()
                    {
                        $(this).removeClass("hovered");
                        $("table#drawMessList td[barcnt="+idx+"]").removeClass("hovered");
                    }
                );
            }
        );
    });

</script>
    <h4>文件被调用情况</h4>
    <svg id="drawPanel"></svg>
    <table id="drawMessList" style="text-align: left;
	    font-size: 12px; border: 1px solid black;">

    </table>
</body>
</html>
